布局:box-sizing ,clear float,flex

清除浮动

.clearfix{
    &:after{
        clear:both;
        height:0;
        content:'';
        display: table;    
    }
}

说明：

• content: 用处也很大，可以用来添加一些文字提醒。

• display: table,flex 都可以，让文档继续按照正常的盒模型渲染。

• 伪类用处以后在总结example1

给父一级的添加

overflow: hidden;

box-sizing re.

盒模型:border,padding,margin

box-sizing: border-box, content-box

content-box(默认): 元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）;

border-box : 内容宽度/高度=width/height-border-padding

example

开发中的用处:

• re bt set reset

*{
  .box-sizing(border-box);
}
*:before,
*:after {
  .box-sizing(border-box);
}

• 去除因为padding与border带来的溢出

• 重置 input

flexbox 布局

re. 中文,
re.2,
re. 英文

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex-grow: 控制扩展比例 数值(不可为负)

flex-shrink: 控制收缩比例 数值(不可为负)

flex-basis: auto | <'width'> 基础宽度

可用空间 =（容器大小 - 所有相邻项目flex-basis总和）;
每项伸缩大小 = 伸缩基准值 + ((可用空间 / 所有相邻项目flex-grow总和) x 此项的flex-grow值);

这个公式有待考究

常用的flex设置和他的意义

flex: 0 auto / flex: initial

this is equivalent to flex: 0 1 auto, which is the initial value. This value sizes the item based on the width/height properties. (If the item’s main size property computes to auto, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its min-size when there is insufficient space.

flex: auto

This is equivalent to flex: 1 1 auto. This value sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are either flex: auto, flex: initial, or flex: none, any positive free space after the items have been sized will be distributed evenly to the items with flex: auto.

flex: none

This is equivalent to flex: 0 0 auto. This value sizes the item according to the width/height properties, but makes the flex item fully inflexible. This is similar to initial, except that flex items are not allowed to shrink, even in overflow situations.

flex: <positive-number>

This value is equivalent to flex: <positive-number> 1 0%. This value makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

• flex-direction

  flex-direction: row | row-reverse | column | column-reverse
  

  控制显示的方向

• flex-wrap

  flex-wrap: nowrap | wrap | wrap-reverse
  

  控制是否多行显示

综合体 flex-flow: <'flex-direction'> <'flex-wrap'>

• justify-content

  justify-content: flex-start | flex-end | center | space-between | space-around
  

主轴对齐方式：指定伸缩项目沿主轴对齐方式 （水平方向）

• align-items: flex-start | flex-end | center | baseline | stretch

  align-items: flex-start | flex-end | center | baseline | stretch
  

  侧轴对齐方式：指定伸缩项目沿着侧轴对齐方式 (垂直方向)

• align-content

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  

当伸缩容器的侧轴还有多余空间时，align-content属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似。

请注意本属性在只有一行的伸缩容器上没有效果。只有多行的伸缩容器才会在侧轴上有多余的空间以供对齐，因为仅包含一行的伸缩容器中，唯一的一行会自动伸展填充全部的空间。

• align-self

  align-self: auto | flex-start | flex-end | center | baseline | stretch
  

  控制单个条目的样式布局

＋ order 控制显示的顺序

自己练习区域